<template>
  <div class="join-page">
    <div class="top">
      <div class="title"></div>
      <div class="sub-title"></div>
    </div>
    <div class="content">
      <div class="header"></div>
      <div class="body">
        <form class="form">
          <div class="form-item inline required">
            <label>编号</label>
            <span>{{id}}</span>
          </div>
          <div class="form-item inline required">
            <label>昵称</label>
            <span>{{nickName}}</span>
          </div>
          <!-- <div class="form-item inline required">
            <label>姓名</label>
            <span>{{trueName}}</span>
          </div> -->
          <!-- <div class="form-item inline required">
            <label>手机</label>
            <span>{{phone}}</span>
          </div> -->
          <div class="form-item block required picture-upload">
            <label>照片上传</label>
            <div class="picture-list">
              <div class="picture-item" 
                v-for="(photoUrl, index) in photos" 
                :key="index"
                :style="{backgroundImage: 'url(' + photoUrl + ')'}">
                <div class="close" @click.stop="deletePicture(index)"><i class="icon icon-close"></i></div></div>
              <div class="add-wrap">
              <div class="add" @click="handlePictureAdd"><i class="icon icon-xiangji"></i></div>
              <input type="file" ref="pictureInput" @change="uploadPicture" accept="image/*" style="display:none">
                <!-- <p>点击添加</p> -->
              </div>
            </div>            
            <p class="info">限制上传10张照片，如果上传不了照片，请求助于香肠树客服！</p>
          </div>
          <div class="form-item block video-upload">
            <label>视频上传</label>
            <div class="picture-list">
              <div class="picture-item"
                v-if="hasVideo"
                :style="{backgroundImage: 'url(' + video.thumbUrl + '?1' + ')'}">
                <div class="close" @click.stop="deleteVideo">
                  <i class="icon icon-close"></i>
                </div>
              </div>
              <div class="add-wrap" v-show="!hasVideo">
                <div class="add" @click="handleVideoAdd"><i class="icon icon-xiangji"></i></div>
                <input type="file" ref="videoInput" @change="uploadVideo" accept="video/*" style="display:none">
                <!-- <p>点击添加</p> -->
              </div>
            </div>            
          </div>
          <div class="form-item block required">
            <label>参赛宣言</label>
            <textarea maxlength="100" style="display: block" @input="descInput" v-model="desc" placeholder="请输入您的参赛宣言"></textarea>
            <span style="display: block; text-align: right">{{remnant}}/100</span>
          </div>
        </form>
      </div>
    </div>
    <div class="btn-group">
      <button class="btn btn-red" @click="submit">保存</button>
    </div>    
  </div>
</template>

<script>
import { toUnicode, decodeUnicode, getClientType } from '../libs/app'

export default {
  name: 'Edit',
  data () {
    return {
      remnant: 0,
      desc: '',
      hasVideo: false,
      photos: [],
      photosIds: [],
      video: {
        url: '',
        thumbUrl: '',
        id: 0
      },
      nickName: '',
      trueName: '',
      phone: '',
      id: 0
    }
  },
  methods: {
    queryDetail () {
      this.$http.simplePost('/beautyPageantController/getMyBeautyPOJO', {serverToken: this.$token}).then((data) => {
      // 判断是否报名
      if(!data.sign) {
        this.$messagebox.alert('如果您已报名，请联系我们的客服：18914871020')
        this.$router.back(-1)
        return
      }

      if(data.beautyPictures === null) {
        this.$messagebox.confirm('无报名信息，请前去报名').then(action => {
          this.$router.push('/join')
        })
        this.$router.back(-1)
        return
      }

      this.id = data.id
      this.nickName = decodeUnicode(data.signName)
      this.trueName = decodeUnicode(data.userName)
      this.desc = decodeUnicode(data.declaration)

      let medias = data.beautyPictures
        for(let i=0,len=medias.length; i<len; i++) {
          if(medias[i].type === 'VIDEO') {

            this.hasVideo = true

            // 赋值视频
            this.video.thumbUrl = medias[i].url
            this.video.url = medias[i].videoUrl
            this.video.id = medias[i].id

          } else if(medias[i].type === 'PICTURE') {
            //赋值图片
            this.photos.push(medias[i].url)
            this.photosIds.push(medias[i].id)

          }
        }
    })
    },
    descInput () {
      let txtVal = this.desc.length;
      this.remnant = txtVal;
    },
    handlePictureAdd () {
      this.$refs.pictureInput.click()
    },
    handleVideoAdd () {
      this.$refs.videoInput.click()
    },
    uploadPicture (e) {
      if(this.photos.length >= 10) {
        this.$toast('您已超出了上传数量')
        return
      }

      let files = e.target.files || e.dataTransfer.files;
      if(!files.length) return;

      this.$indicator.open({
        text: '上传中，请稍后',
        spinnerType: 'fading-circle'
      })

      this.$http.uploadFile(files[0], '/beautyPageantController/uploadFile?merchantMediaType=PICTURE').then((data => {
        this.photos.push(data.originalUrl)
        this.photosIds.push(data.id)
        this.$indicator.close()
      })).catch(err => {
        this.$indicator.close()
      })

      this.$refs.pictureInput.value = ''
    },
    uploadVideo (e) {
      let files = e.target.files || e.dataTransfer.files;
      if(!files.length) return;

      this.$indicator.open({
        text: '上传中，请稍后',
        spinnerType: 'fading-circle'
      })

      this.$http.uploadFile(files[0], '/beautyPageantController/uploadFile?merchantMediaType=VIDEO').then(data => {
        this.hasVideo = true
        this.video.url = data.originalUrl
        this.video.id = data.id
        setTimeout(()=> {
          this.video.thumbUrl = data.thumbUrl
        }, 500)
        
        this.$indicator.close()
      }).catch(err => {
        this.$indicator.close()
      })

      this.$refs.videoInput.value = ''
    },
    deletePicture (idx) {
      this.photos = this.photos.filter((currentValue, index, arr) => {
        return idx !==index
      })

      this.photosIds = this.photosIds.filter((currentValue, index, arr) => {
        return idx !==index
      })
    },
    deleteVideo () {
      this.hasVideo = false
    },
    submit () {
      let self = this
      if(this.photos.length === 0) {
        this.$toast('请至少上传一张照片')
        return
      }

      // 拼接视频
      if(this.hasVideo) {
        this.photosIds.push(this.video.id)
      }

      this.$http.complexPost('/beautyPageantController/editBeautyAnt', {
        declaration: toUnicode(this.desc),
        mediaList: this.photosIds,
        serverToken: this.$token
        })
        .then(data =>{
          let instance = this.$toast(`保存成功`)
          setTimeout(() => {
            instance.close()
            self.$router.back(-1)
          }, 2000)
          
      })
    }
  },
  mounted () {
    this.queryDetail()
  }
}
</script>

<style scoped>
.join-page {
  padding-bottom: 100px;
}
.join-page .top {
  position: relative;
  background-image: url(../../static/img/rules-top-bg.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  height: 722px;
}
.join-page .top .title {
  height: 211px;
  background-image: url(../../static/img/top-title.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  padding-top: 100px;
}
.join-page .top .sub-title {
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
  height: 113px;
  background-image: url(../../static/img/title-csbm.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.join-page .content {
  position: relative;
  top: -93px;
}
.join-page .content .header {
  position: relative;
  top: 20px;
  height: 161px;
  align-items: center;
  background-image: url(../../static/img/subtitle-bg.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
.join-page .content .body {
  box-sizing: border-box;
  background-color: #f1e1ff;
  width: 92%;
  margin: 0 auto;
  padding: 100px 45px 50px;
  color: #333;
  font-size: 26px;
  text-align: left;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
.join-page input {
  outline: none;
  border: none;
  background-color: transparent;
  height: 45px;
  font-size: 26px;
  /* line-height: 15px; */
}
.join-page label {
  min-height: 100px;
  line-height: 100px;
}
.join-page input::-webkit-input-placeholder {
  color: #bda2d6;
}
.join-page .form {
  color: #161616;
  font-size: 28px;
}
.join-page .form-item {
  border-top: 1px solid #d9c9e6;
  padding-left: 20px;
}
.join-page .form-item:first-child {
  border-top: none;
}
.join-page .form-item.required label::before{
  position: absolute;
  left: -20px;
  content: '*';
  color: red;
}
.join-page .form-item.has-btn {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.join-page .form-item.has-btn input {
  max-width: 200px;
}
.join-page .form-item button {
  background-color: transparent;
  border: none;
  /* min-width: 180px;  */
  color: #510494;  
  height: 65px;
  line-height: 65px;
  font-size: 26px;
  border-left: 1px solid #b0a3ba;
}
.join-page .form label {
  position: relative;
  display: inline-block;
  min-width: 150px;
  box-sizing: border-box;
}
.join-page .add-wrap {
  width: 130px;
  margin-bottom: 15px;
}
.join-page .add-wrap .add {  
  width: 130px;
  height: 130px;
  background-color: #d4b8ee;
  text-align: center;
}
.join-page .add-wrap .add .icon {
  font-size: 60px;
  color: #fff;
  line-height: 130px;
}
.join-page .add-wrap p {
  font-size: 23px;
  text-align: center;
  margin-top: 10px;
}
.join-page .picture-upload .info {
  color: #bda2d6;
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 45px;
}
.join-page .picture-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 45px;
}
.join-page .picture-item,
.join-page .video-item {
  position: relative;
  width: 130px;
  height: 130px;
  /* background-image: url('../../static/img/pretty-girl-01.png'); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-right: 15px;
  margin-bottom: 15px;
}
.join-page .picture-item .close,
.join-page .video-item .close {
  position: absolute;
  top: -15px;
  right: -10px;
  color: #fff;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 50%;
  background-color: red;  
}
.join-page .close .icon-close {
  position: relative;
  top: 3px;
}
.join-page textarea {
  background-color: transparent;
  border: none;
  outline: none;
  min-height: 280px;
  width: 100%;
  padding: 15px;
  font-size:26px;
}
.join-page textarea::-webkit-input-placeholder {
  color: #bda2d6
}
.join-page textarea + span {
  color: #bda2d6;
} 
.join-page .ask-info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.join-page .ask-info a {
  color: #e65050;
}
.join-page .checkbox {
  margin-right: 30px;
}
.join-page .checkbox .checkbox-core {
  width: 35px;
  height: 35px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 5px solid #d4b8ee;
  position: relative;
  /* background-color: #d4b8ee; */
}
.join-page .checkbox .checkbox-input:checked+.checkbox-core {
    background-color: #ed1c24;
    border-color: #ed1c24;
}
.join-page .checkbox .checkbox-input:checked+.checkbox-core::after {
  border-color: #fff;
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
}
.join-page .checkbox .checkbox-core::after {
    border: 4px solid transparent;
    border-left: 0;
    border-top: 0;
    content: "";
    top: 0px;
    left: 7px;
    position: absolute;
    width: 8px;
    height: 16px;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
}
.join-page .btn-group {
  margin: 50px auto;
}
.join-page .btn-group button {
  width: 330px;
  height: 90px;
  border-radius: 50px;
  font-size: 36px;
  border: none;
}
.join-page button.disabled {
  background-color: #ec8282
}
.mint-msgbox-message p {
  text-align: left;
  margin-bottom: 10px;
}
</style>